<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    width="35%"
    @ok="handleSubmit"
    @cancel="close"
  >
    <a-form
      :model="formState"
      ref="formRef"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item
        label="虚拟卡号"
        name="card_no"
        :rules="[{ required: true, message: '请输入虚拟卡号' }]"
      >
        <a-input
          v-model:value="formState.card_no"
          placeholder="请输入虚拟卡号"
        />
      </a-form-item>
      <a-form-item
        label="虚拟卡密"
        name="card_pwd"
        :rules="[{ required: true, message: '请输入虚拟卡密' }]"
      >
        <a-input-password
          v-model:value="formState.card_pwd"
          placeholder="请输入虚拟卡密"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
  <script setup>
import { reactive, ref } from "vue";
import { virOrderSend } from "@/api/order";
import { message } from "ant-design-vue";
import useModal from "@/utils/useModal";

const emits = defineEmits(["modal-success"]);
const { visible, modalTitle } = useModal();
const props = defineProps({
  id: {
    type: Number,
    default: null,
  },
});

const formState = reactive({
  card_no: "",
  card_pwd: null,
});
const formRef = ref();

const show = (model) => {
  visible.value = true;
  modalTitle.value = model.title || "修改物流信息";
};

// 保存
const handleSubmit = async () => {
  await formRef.value.validate();
  const params = {
    id: props.id, // 订单id
    card_no: formState.card_no,
    card_pwd: formState.card_pwd,
  };
  // 立即发货
  virOrderSend(params).then((res) => {
    if (res.code == 0) {
      message.success(res.msg);
      visible.value = false;
      formRef.value.resetFields();
      emits("modal-success");
    }
  });
};
const close = () => {
  formRef.value.resetFields();
};
// 暴露方法
defineExpose({ show });
</script>
  